<template>
    <div 
        v-if="!['start','end'].includes(properties.prop)" 
        class="node" 
        :style="{
            width:properties.width + 'px',
            height:properties.height + 'px',
            borderRadius:'4px'
        }"
        @contextmenu.capture
    >
        <slot name="title"/>
        <div className="content">
            <a-tooltip placement="topLeft">
                <template #title>
                    <span>{{ properties.desc }}</span>
                </template>
                {{ properties.desc }}
            </a-tooltip>
        </div>
    </div>
    <div 
        v-else 
        class="node" 
        style="display: flex;justify-content: center;align-items: center;" 
        :style="{
            width:properties.width + 'px',
            height:properties.height + 'px',
            backgroundColor:bgc,
            borderRadius:'4px'
        }"
    >
        {{ properties.name }}
    </div>
</template>

<script setup lang="ts">
defineProps(["properties","bgc"])
</script>

<style lang='scss' scoped>
.node{
    box-sizing: border-box;
    overflow: hidden;
    color: #fff;
    .content{
        background-color: #fff;
        height: 65%;
        width: 100%;
        color: black;
        padding: 6px 12px;
        overflow: hidden;  /*超出部分隐藏*/
        white-space: nowrap;  /*禁止换行*/
        text-overflow: ellipsis; /*省略号*/
    }
}
</style>